<template>
  <div v-if="isShowTabbar">
    <van-tabbar v-model="active" active-color="#187a72" @change="handleTabbarChange">
      <van-tabbar-item v-for="(item,index) in tabbar"
      :key="index"
      :to="item.to"
      >
        <span>{{item.title}}</span>
        <img slot="icon"
        slot-scope="props"
        :src="props.active ? item.iconH : item.icon"
         />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
const tabbar = [
  {
    index: 0,
    title: '首页',
    to: {
      name: 'home',
      replace: true
    },
    icon: require('@/assets/img/icon-home.png'),
    iconH: require('@/assets/img/icon-home_h.png')
  },
  {
    index: 1,
    title: '已购课程',
    to: {
      name: 'lesson',
      replace: true
    },
    icon: require('@/assets/img/icon-course.png'),
    iconH: require('@/assets/img/icon-course_h.png')
  },
  {
    index: 2,
    title: '我的',
    to: {
      name: 'mine',
      replace: true
    },
    icon: require('@/assets/img/icon-mine.png'),
    iconH: require('@/assets/img/icon-mine_h.png')
  }
]
export default {
  name: 'Tabbar',
  props: {
    index: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      active: 0,
      tabbar
    }
  },

  computed: {
    ...mapState(['isShowTabbar'])
  },

  watch: {
    $route (to, from) {
      if (to.name === 'home') {
        this.active = 0
        this.setIsShowTabbar({
          show: true
        })
      } else if (to.name === 'lesson') {
        this.active = 1
        this.setIsShowTabbar({
          show: true
        })
      } else if (to.name === 'mine') {
        this.active = 2
        this.setIsShowTabbar({
          show: true
        })
      } else {
        this.setIsShowTabbar({
          show: false
        })
      }
    }
  },

  mounted () {
    this.active = this.index
  },
  methods: {
    ...mapMutations(['setIsShowTabbar']),
    handleTabbarChange (val) {
      this.active = val
    }
  }
}
</script>
<style lang="less" scoped>
  @import "~less/variable.less";
</style>
